<template>
  <div class="fans-container">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div ref="main" style="width: 1000px; height: 600px"></div>
    <h2>地图图表示例</h2>
    <map-demo />
    <h2>纯地图</h2>
    <bmap/>
  </div>
</template>
<script>
import * as echarts from "echarts" // 全部引入 当做 echarts 这种只能是 学习的时候用一用，后面还是需要去学习正确的引入方式
// 你可以查一下 vue-echarts 这个是用组件的方式引入 更加适合vue  OKKKKKKK 
import MapDemo from "./components/map"
import Bmap  from  './components/bmap-dome'

export default {
  name: "fansIndex",
  components: {
      MapDemo,
      Bmap 
  },
  props: {},
  data() {
    return {};
  },
  coumputed: {},
  watch: {},
  created() {},
  //如果想一上来就去操作DOM 那么就用mounted钩子函数
  mounted() {
    var myChart = echarts.init(this.$refs.main);

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
  methods: {},
};
</script>
<style lang="less" scoped>
</style>
